<template>
	<view class="page">
		<view class="banner">
			<image class="banner-img" src="../../../static/img/2.jpg"></image>
			<view class="banner-title">房产税石锤！2023年之前出台，普通青年们如何应对楼市巨变</view>
		</view>
		<view class="article-meta">
			<text class="article-author">智东西</text>
			<text class="article-text">发表于</text>
			<text class="article-time">22小时前</text>
		</view>
		<view class="article-content">
			<rich-text :nodes="htmlString"></rich-text>
			
			<rich-text>这新闻无敌啊</rich-text>
		</view>
		
		
		
		<!-- 底部评论 -->
		<view class="detail-foot">
			<view class="detail-foot-comment">
				<input type="text" placeholder="写评论"/>
			</view>
			<view class="detail-foot-img">
				<text class="uni-badge uni-badge-primary">9</text>
				<view class=".uni-icon uni-icon-chatbubble"></view>
			</view>
			<view class="detail-foot-img">
				<view class=".uni-icon uni-icon-star"></view>
			</view>
			<view class="detail-foot-img">
				<view class=".uni-icon uni-icon-redo"></view>
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'list-triplex-row',
				banner: {},
				htmlString: ""
			}
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				path: '/pages/template/list2detail-detail/list2detail-detail?detailDate=' + JSON.stringify(this.banner)
			}
		},
		onLoad(e) {
			this.banner = JSON.parse(e.detailDate);
			this.getDetail();
			uni.setNavigationBarTitle({
				title: this.banner.title
			})
		},
		methods: {
			getDetail() {
				uni.request({
					url: 'https://spider.dcloud.net.cn/api/news/36kr/' + this.banner.post_id,
					success: (data) => {
						if (data.statusCode == 200) {
							this.htmlString = data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
						}
					},
					fail: () => {
						console.log('fail');
					}
				})
			}
		}
	}
</script>

<style>
	@import "../../../common/icon.css";
	@import "../../../common/uni.css";
	page {
		background: #efeff4;
	}

	.banner {
		height: 360px;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.banner-img {
		width: 100%;
	}

	.banner-title {
		max-height: 84px;
		overflow: hidden;
		position: absolute;
		left: 30px;
		bottom: 30px;
		width: 90%;
		font-size: 32px;
		font-weight: 400;
		line-height: 42px;
		color: white;
		z-index: 11;
	}

	.article-meta {
		padding: 20px 40px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;
	}

	.article-text {
		font-size: 26px;
		line-height: 50px;
		margin: 0 20px;
	}

	.article-author,
	.article-time {
		font-size: 30px;
	}

	.article-content {
		padding: 0 30px;
		overflow: hidden;
		font-size: 30px;
	}

/* 底部评论 */
     .detail-foot{
		 position: relative;
		 padding: 0 30px;
		 width: 100%;
		 height: 110px;
		 bottom: 0;
		 background: #FFFFFF;
		 position: fixed;
		 
	 }
	 /* 输入框 */
	 .detail-foot-comment{
		 width: 50%;
		 height: 70px;
		 margin-top: 20px;
		 background:#e1e1e1;
		 border-radius: 55px;
		 float: left;
	 }
	 .detail-foot-comment input{
		 margin-top: 10px;
		 margin-left: 28px;
		 color: #8F8F94;
		 font-size: 26px;
		
	 }
    /* .detail-foot-img image{
		 margin-top: 30px;
		 float: left;
		 margin-left: 6%;
		 width: 60px;
		 height: 60px;
	 } */
	.uni-icon {
		float: left;
		margin-left: 5%;
		font-size: 60px;
		width: 70px;
		height: 70px;
		margin-top: 30px;
		
	}
	/* 数字角标 */
	.uni-badge{
		position: absolute;
		border-radius: 15px;
		top: 18px;
		right:35%;
		}
	.uni-badge-primary{
		background: #E80080;
		
		}
	 
</style>
